<template>
  <div class="custom-el-main">
    <el-container>
      <el-main>
        <div v-loading="pageLoading">
          <el-card class="el-card-title">
            <template #header>
              <div class="card-title-header">
                <span class="el-field-area-title-text">
                  <i class="el-icon-c-scale-to-original"></i>
                  {{
                    $i18n.locale === "zh-cn" ? form.formCNName : form.formENName
                  }}
                </span>
                <el-button
                  class="el-field-title-close"
                  icon="el-icon-finished"
                  @click="PublishForm()"
                  size="mini"
                  type="text"
                  >{{ $t("i18n.co_publish") }}</el-button
                >
                <el-button
                  class="el-field-title-close"
                  icon="el-icon-check"
                  @click="SaveForm()"
                  size="mini"
                  type="text"
                  >{{ $t("i18n.co_save") }}</el-button
                >
                <el-button
                  class="el-field-title-close"
                  icon="el-icon-plus"
                  @click="AddArea()"
                  size="mini"
                  type="text"
                  >{{ $t("i18n.co_add_area") }}</el-button
                >
              </div>
            </template>
            <el-scrollbar :style="autoHeight">
              <draggable
                :list="form.areas"
                dragable="true"
                :animation="100"
                :forceFallback="true"
                item-key="areaSeq"
                @change="onMoveCallback"
              >
                <template #item="{ element  }">
                  <div class="title">
                    <el-card
                      :class="element.usable ? 'box-card' : 'box-card-danger'"
                      style="min-height:100px"
                    >
                      <template #header>
                        <div
                          :class="
                            element.usable
                              ? 'card-header'
                              : 'card-header-danger'
                          "
                        >
                          <span class="el-field-area-text">
                            <i class="el-icon-postcard"></i>
                            {{
                              $i18n.locale === "zh-cn"
                                ? element.areaCNName
                                : element.areaENName
                            }}
                          </span>
                          <el-tooltip
                            placement="right-start"
                            v-if="element.mainTable == ''"
                            effect="light"
                          >
                            <template #content>
                              <el-tag
                                effect="dark"
                                size="mini"
                                style="margin-left: 5px; margin-top: 5px;"
                                :type="element.usable ? '' : 'danger'"
                              >
                                {{ $t("formi18n.form_tables") }}：{{
                                  element.areaCNName
                                }}
                              </el-tag>
                              <br />
                              <el-tag
                                effect="dark"
                                size="mini"
                                style="margin-left: 5px; margin-top: 5px; "
                                :type="element.usable ? '' : 'danger'"
                              >
                                {{ $t("formi18n.form_tables_en") }}：{{
                                  element.areaENName
                                }}
                              </el-tag>
                              <br />
                              <el-tag
                                effect="dark"
                                size="mini"
                                style="margin-left: 5px; margin-top: 5px;"
                                :type="element.usable ? '' : 'danger'"
                              >
                                {{ $t("formi18n.form_main") }}：{{
                                  element.tableCode
                                }}
                              </el-tag>
                            </template>
                            <el-tag
                              size="mini"
                              :type="element.usable ? '' : 'danger'"
                              style="margin-left: 5px;"
                              effect="dark"
                              >{{ $t("formi18n.form_main") }}</el-tag
                            >
                          </el-tooltip>
                          <el-tooltip
                            placement="right-start"
                            v-else
                            effect="light"
                          >
                            <template #content>
                              <el-tag
                                effect="dark"
                                size="mini"
                                style="margin-left: 5px; margin-top: 5px;"
                                :type="element.usable ? 'warning' : 'danger'"
                              >
                                {{ $t("formi18n.form_tables") }}：{{
                                  element.mainTableName
                                }}
                              </el-tag>
                              <br />
                              <el-tag
                                effect="dark"
                                size="mini"
                                style="margin-left: 5px; margin-top: 5px; "
                                :type="element.usable ? 'warning' : 'danger'"
                              >
                                {{ $t("formi18n.form_tables_en") }}：{{
                                  element.mainTableENName
                                }}
                              </el-tag>
                              <br />
                              <el-tag
                                effect="dark"
                                size="mini"
                                style="margin-left: 5px; margin-top: 5px;"
                                :type="element.usable ? 'warning' : 'danger'"
                              >
                                {{ $t("formi18n.form_main") }}：{{
                                  element.mainTable
                                }}
                              </el-tag>
                            </template>
                            <el-tag
                              effect="dark"
                              size="mini"
                              style="margin-left: 5px;"
                              :type="element.usable ? 'warning' : 'danger'"
                              >{{ $t("formi18n.form_child_table") }}</el-tag
                            >
                          </el-tooltip>
                          <el-radio-group
                            v-model="element.columnes"
                            size="mini"
                            v-if="element.presentation == 0 && element.usable"
                            class="el-field-area-columens"
                          >
                            <el-radio-button :label="1">
                              {{ $t("i18n.columnes_1") }}
                            </el-radio-button>
                            <el-radio-button :label="2">
                              {{ $t("i18n.columnes_2") }}
                            </el-radio-button>
                            <el-radio-button :label="3">
                              {{ $t("i18n.columnes_3") }}
                            </el-radio-button>
                          </el-radio-group>
                          <el-button
                            v-if="
                              element.areaCode !==
                                'form_apply_employeebasicinfo'
                            "
                            class="el-field-area-close-danger"
                            type="text"
                            icon="el-icon-delete"
                            @click="RemoveArea(element)"
                            >{{ $t("i18n.co_del") }}</el-button
                          >
                          <el-button
                            v-if="element.usable"
                            :class="
                              element.usable
                                ? 'el-field-area-close'
                                : 'el-field-area-close-danger'
                            "
                            type="text"
                            icon="el-icon-edit"
                            @click="EditorArea(element)"
                            >{{ $t("i18n.co_edit") }}</el-button
                          >
                          <el-button
                            v-if="element.usable"
                            :class="
                              element.usable
                                ? 'el-field-area-close'
                                : 'el-field-area-close-danger'
                            "
                            type="text"
                            icon="el-icon-plus"
                            @click="AddAreaField(element)"
                            >{{ $t("i18n.co_AddField") }}</el-button
                          >
                        </div>
                      </template>
                      <el-form size="mini">
                        <div v-if="element.presentation == 0">
                          <draggable
                            :list="element.fields"
                            dragable="true"
                            :animation="100"
                            :forceFallback="true"
                            item-key="areaSeq"
                            @change="onMoveCallback"
                          >
                            <template #item="{ index  }">
                              <el-col
                                :class="
                                  element.usable
                                    ? 'el-field-area-close'
                                    : 'el-field-area-close-danger'
                                "
                                :style="
                                  'width:' +
                                    calculatewidth(
                                      element.fields[index].controlsType,
                                      element.columnes
                                    ) +
                                    '%'
                                "
                              >
                                <el-form-item
                                  v-if="
                                    element.fields[index].controlsType ===
                                      'image' ||
                                      element.fields[index].controlsType ===
                                        'avatar'
                                  "
                                  :label="
                                    $i18n.locale == 'zh-cn'
                                      ? element.fields[index].cnName
                                      : field.enName
                                  "
                                  label-position="left"
                                  label-width="180px"
                                  style="margin-bottom: 0px;"
                                  :class="
                                    element.usable &&
                                    element.fields[index].usable
                                      ? 'el-feild-fields-item'
                                      : 'el-feild-fields-delete-item '
                                  "
                                >
                                  <el-avatar
                                    :size="67"
                                    :src="defaulturl"
                                    style="float:left;"
                                  ></el-avatar>
                                  <div style="float:left">
                                    <el-button
                                      v-if="
                                        element.usable &&
                                          element.usable &&
                                          element.fields[index].usable
                                      "
                                      :class="
                                        element.usable
                                          ? 'el-field-area-close'
                                          : 'el-field-fields-close-danger'
                                      "
                                      type="text"
                                      icon="el-icon-edit"
                                      @click="
                                        EditorFields(
                                          element,
                                          element.fields[index]
                                        )
                                      "
                                    >
                                      {{ $t("formi18n.form_eddit_field") }}
                                    </el-button>
                                    <br />
                                    <el-button
                                      :class="
                                        element.fields[index].fieldCode ===
                                        'empid'
                                          ? ''
                                          : 'el-field-fields-close-danger'
                                      "
                                      type="text"
                                      icon="el-icon-delete"
                                      @click="
                                        RemoveFields(
                                          element,
                                          element.fields[index]
                                        )
                                      "
                                      :disabled="
                                        element.fields[index].fieldCode ===
                                          'empid' ||
                                          element.fields[index].controlsType ===
                                            'avatar'
                                      "
                                      >{{ $t("i18n.co_del") }}</el-button
                                    >
                                  </div>
                                </el-form-item>
                                <el-form-item
                                  v-else
                                  :label="
                                    $i18n.locale == 'zh-cn'
                                      ? element.fields[index].cnName
                                      : element.fields[index].enName
                                  "
                                  label-position="left"
                                  label-width="180px"
                                  :class="
                                    element.usable &&
                                    element.fields[index].usable
                                      ? 'el-feild-fields-item'
                                      : 'el-feild-fields-delete-item '
                                  "
                                >
                                  <el-input
                                    v-if="
                                      element.fields[index].controlsType ===
                                        'textarea'
                                    "
                                    type="textarea"
                                    :disabled="1 == 1"
                                    :rows="5"
                                  ></el-input>
                                  <el-date-picker
                                    v-else-if="
                                      element.fields[index].controlsType ===
                                        'datetime' ||
                                        element.fields[index].controlsType ===
                                          'date' ||
                                        element.fields[index].controlsType ===
                                          'year' ||
                                        element.fields[index].controlsType ===
                                          'month' ||
                                        element.fields[index].controlsType ===
                                          'day' ||
                                        element.fields[index].controlsType ===
                                          'time'
                                    "
                                    type="date"
                                    placeholder="选择日期"
                                    :disabled="1 == 1"
                                    style="width:100%"
                                  ></el-date-picker>
                                  <el-input
                                    v-else
                                    :disabled="1 == 1"
                                  ></el-input>
                                  <el-button
                                    v-if="
                                      element.usable &&
                                        element.usable &&
                                        element.fields[index].usable
                                    "
                                    :class="
                                      element.usable
                                        ? 'el-field-area-close'
                                        : 'el-field-fields-close-danger'
                                    "
                                    type="text"
                                    icon="el-icon-edit"
                                    @click="
                                      EditorFields(
                                        element,
                                        element.fields[index]
                                      )
                                    "
                                  >
                                    {{ $t("formi18n.form_eddit_field") }}
                                  </el-button>
                                  <el-button
                                    :class="
                                      element.fields[index].fieldCode ===
                                      'empid'
                                        ? ''
                                        : 'el-field-fields-close-danger'
                                    "
                                    type="text"
                                    icon="el-icon-delete"
                                    @click="
                                      RemoveFields(
                                        element,
                                        element.fields[index]
                                      )
                                    "
                                    :disabled="
                                      element.areaCode ==
                                        'form_apply_employeebasicinfo' &&
                                        (element.fields[index].fieldCode ===
                                          'empid' ||
                                          element.fields[index].fieldCode ===
                                            'empcode' ||
                                          element.fields[index].fieldCode ===
                                            'cnname' ||
                                          element.fields[index].fieldCode ===
                                            'enname')
                                    "
                                    >{{ $t("i18n.co_del") }}</el-button
                                  >
                                </el-form-item>
                              </el-col>
                            </template>
                          </draggable>
                        </div>
                        <div v-else>
                          <el-table
                            style="width: 100%"
                            size="mini"
                            border
                            v-if="element.fields.length > 0"
                          >
                            <el-table-column
                              v-for="(field, index) in element.fields"
                              :key="index"
                              :width="calculateTablewidth(element.fields)"
                              align="left"
                            >
                              <template #header>
                                <el-tooltip
                                  placement="right-start"
                                  effect="light"
                                >
                                  <template #content>
                                    <el-button
                                      v-if="
                                        element.usable &&
                                          element.usable &&
                                          field.usable
                                      "
                                      :class="
                                        element.usable
                                          ? 'el-field-table-close'
                                          : 'el-field-table-close-danger'
                                      "
                                      type="text"
                                      icon="el-icon-edit"
                                      @click="EditorFields(element, field)"
                                    >
                                      {{ $t("formi18n.form_eddit_field") }}
                                    </el-button>
                                    <br />
                                    <el-button
                                      :class="
                                        field.fieldCode === 'empid'
                                          ? ''
                                          : 'el-field-table-close-danger'
                                      "
                                      type="text"
                                      icon="el-icon-delete"
                                      @click="RemoveFields(element, field)"
                                      :disabled="field.fieldCode === 'empid'"
                                      >{{ $t("i18n.co_del") }}</el-button
                                    >
                                  </template>
                                  <span class="el-field-span-text">
                                    {{
                                      $i18n.locale == "zh-cn"
                                        ? field.cnName
                                        : field.enName
                                    }}
                                  </span>
                                </el-tooltip>
                              </template>
                            </el-table-column>
                          </el-table>
                        </div>
                      </el-form>
                    </el-card>
                  </div>
                </template>
              </draggable>
            </el-scrollbar>
          </el-card>
        </div>
      </el-main>
    </el-container>
    <el-drawer
      :append-to-body="true"
      :withHeader="false"
      v-model="showareadrawer"
      direction="rtl"
      size="30%"
      :before-close="handleClose"
    >
      <field-area-component-vue
        ref="fieldarea"
        @AreaPropetryEvent="AreaPropetryEvent"
      ></field-area-component-vue>
    </el-drawer>
    <el-drawer
      :append-to-body="true"
      :withHeader="false"
      v-model="showfielddrawer"
      direction="rtl"
      size="55%"
      :before-close="handleClose"
    >
      <field-property-componet-vue
        ref="fieldproperty"
        @FieldPropetryEvent="FieldPropetryEvent"
        v-if="showfielddrawer"
      ></field-property-componet-vue>
    </el-drawer>
    <div class="el-dialog-content">
      <dialog-form-area-componet-vue
        ref="areaInfo"
        @confirmEvent="dialogConfirmEvent"
      ></dialog-form-area-componet-vue>
      <dialog-form-field-componet-vue
        ref="fieldInfo"
        @confirmEvent="fieldEvent"
      ></dialog-form-field-componet-vue>
    </div>
  </div>
</template>
<script>
import reqVue from "../../utils/req.vue";
import confVue from "../../utils/conf.vue";
import FieldAreaComponentVue from "../../components/form/FieldAreaComponent.vue";
import DialogFormAreaComponetVue from "../../components/form/DialogFormAreaComponet.vue";
import DialogFormFieldComponetVue from "../../components/Global/DialogFormFieldComponet.vue";
import FieldPropertyComponetVue from "../../components/form/FieldPropertyComponet.vue";
import Draggable from "vuedraggable";
let windowHeight = parseInt(window.innerHeight);
let windowinnerWidth = parseInt(window.innerWidth);
export default {
  components: {
    FieldAreaComponentVue,
    DialogFormAreaComponetVue,
    DialogFormFieldComponetVue,
    FieldPropertyComponetVue,
    Draggable,
  },
  data() {
    return {
      windowHeight: windowHeight,
      windowinnerWidth: windowinnerWidth,
      autoHeight: {},
      outHeight: {
        height: "",
      },
      page_Title: "",
      pageType: "add",
      pageLoading: true,
      apipath: "form",
      way: confVue.$formApi,
      form: {},
      defaulturl: require("../../assets/img/avatr.png"),
      showareadrawer: false,
      cards: [],
      showfielddrawer: false,
    };
  },
  mounted() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
  created() {
    this.pageLoading = true;
    this.InitFrom();
  },
  methods: {
    ///加载页面高度
    getHeight() {
      this.outHeight.height = windowHeight - 195 + "px";
      this.autoHeight.height = windowHeight - 195 + "px";
    },
    ///加载表单数据
    InitFrom() {
      let url = this.apipath + "/v1.0/fields/" + this.$route.query.formid;
      reqVue.$Post(null, url, this.way).then(
        function(data) {
          if (data.status) {
            this.form = data.body;
            this.pageLoading = false;
          } else {
            this.$message.error(data.message);
            this.pageLoading = false;
          }
        }.bind(this)
      );
    },
    ///删除区域字段
    RemoveArea(area) {
      this.$confirm(
        this.$t("formi18n.form_field_setting_remove_area"),
        this.$t("i18n.confirm"),
        {
          type: "warning",
        }
      ).then(() => {
        this.form.areas = this.form.areas.filter(
          (o) => o.areaCode !== area.areaCode && o.mainTable !== area.tableCode
        );
      });
    },
    ///删除该区域中的字段
    RemoveFields(area, field) {
      this.$confirm(
        this.$t("formi18n.form_field_setting_remove_fields"),
        this.$t("i18n.confirm"),
        {
          type: "warning",
        }
      ).then(() => {
        area.fields = area.fields.filter(
          (o) => o.fieldCode !== field.fieldCode
        );
      });
    },
    ///编辑区域属性
    EditorArea(area) {
      this.showareadrawer = true;
      this.$nextTick(function() {
        this.$refs.fieldarea.InitProperty(area);
      });
    },
    handleClose() {},
    InitProperty(oldareaproperty, areaproperty) {
      oldareaproperty.areaId = areaproperty.areaId;
      oldareaproperty.areaCNName = areaproperty.areaCNName;
      oldareaproperty.areaCode = areaproperty.areaCode;
      oldareaproperty.areaENName = areaproperty.areaENName;
      oldareaproperty.areaSeq = areaproperty.areaSeq;
      oldareaproperty.columnes = areaproperty.columnes;
      oldareaproperty.fields = areaproperty.fields;
      oldareaproperty.mainTable = areaproperty.mainTable;
      oldareaproperty.presentation = areaproperty.presentation;
      oldareaproperty.records = areaproperty.records;
      oldareaproperty.rowes = areaproperty.rowes;
      oldareaproperty.tableCode = areaproperty.tableCode;
      oldareaproperty.usable = areaproperty.usable;
    },
    ///区域属性编辑后退回
    AreaPropetryEvent(area) {
      if (area != undefined && area != null) {
        this.form.areas.forEach((element) => {
          if (element.areaId === area.areaId) {
            this.InitProperty(element, area);
          }
        });
      }
      this.showareadrawer = false;
    },
    ////添加区域
    AddArea() {
      this.$refs.areaInfo.paramters = {
        data: this.form.areas,
      };
      this.$refs.areaInfo.dialogAreaInfoVisible = true;
      this.$refs.areaInfo.formId = this.$route.query.formid;
      this.$refs.areaInfo.InitTable(null);
    },
    ///添加区域后回调
    dialogConfirmEvent(result) {
      let b = true;
      let message = "";
      for (let index = 0; index < result.length; index++) {
        if (result[index].mainTable !== "") {
          let maintables = result.filter(
            (o) => o.tableCode == result[index].mainTable
          );
          if (maintables.length == 0) {
            b = false;
            message =
              result[index].areaCNName +
              ":未找到主表信息：" +
              result[index].mainTableName;
            break;
          }
        }
      }
      if (b) {
        result.forEach((element) => {
          let el = this.form.areas.filter(
            (o) =>
              o.areaCode === element.areaCode &&
              o.tableCode === element.tableCode
          );
          if (el.length == 0) {
            this.form.areas.push(element);
          }
        });
        this.form.areas.forEach((element) => {
          if (element.areaCode != "form_apply_employeebasicinfo") {
            let el = result.filter(
              (o) =>
                o.areaCode === element.areaCode &&
                o.tableCode === element.tableCode
            );
            if (el.length == 0) {
              this.form.areas = this.form.areas.filter(
                (o) => o.areaCode !== element.areaCode
              );
            }
          }
        });
      } else {
        this.$message.error(message);
      }
    },
    ///添加区域字段
    AddAreaField(area) {
      this.$refs.fieldInfo.paramters = {
        data: area.fields,
      };
      this.$refs.fieldInfo.area = area;
      this.$refs.fieldInfo.dialogFieldInfoVisible = true;
      this.$refs.fieldInfo.primaryKeyValue = area.tableCode;
      this.$refs.fieldInfo.InitTable(null);
    },
    ///添加字段到表单上
    fieldEvent(res) {
      let result = res.result;
      let key = res.key;
      let el = this.form.areas.filter((o) => o.areaCode === key);
      if (el.length > 0) {
        result.forEach((element) => {
          let fd = el[0].fields.filter(
            (o) => o.fieldCode === element.fieldCode
          );
          if (fd.length == 0) {
            el[0].fields.push(element);
          }
        });
        el[0].fields.forEach((element) => {
          if (element.fieldCode != "empid" && element.fieldCode != "photo") {
            let fd2 = result.filter((o) => o.fieldCode === element.fieldCode);
            if (fd2.length == 0) {
              el[0].fields = el[0].fields.filter(
                (o) => o.fieldCode !== element.fieldCode
              );
            }
          }
        });
      }
    },
    ///计算列宽
    calculatewidth(type, column) {
      if (type == "textarea") return 100;
      else return 100 / column;
    },
    calculateTablewidth(fields) {
      if (fields.length > 10) {
        return "120";
      } else return "";
    },
    ///编辑字段
    EditorFields(area, field) {
      this.showfielddrawer = true;
      this.$nextTick(function() {
        this.$refs.fieldproperty.InitProperty(area, field);
      });
    },
    FieldPropetryEvent(res) {
      if (res != undefined && res != null) {
        this.form.areas.forEach((element) => {
          if (element.areaId === res.area.areaId) {
            var field = element.fields.filter(
              (o) => o.fieldCode == res.field.fieldCode
            );
            field.forEach((element) => {
              this.InitFieldProperty(element, res.field);
            });
          }
        });
      }
      this.showfielddrawer = false;
    },
    ///初始化字段属性
    InitFieldProperty(field, fieldproperty) {
      field.cnName = fieldproperty.cnName;
      field.conditions = fieldproperty.conditions;
      field.controlSouces = fieldproperty.controlSouces;
      field.defaultValue = fieldproperty.defaultValue;
      field.editor = fieldproperty.editor;
      field.enName = fieldproperty.enName;
      field.max = fieldproperty.max;
      field.min = fieldproperty.min;
      field.precisions = fieldproperty.precisions;
      field.regulars = fieldproperty.regulars;
      field.required = fieldproperty.required;
      field.show = fieldproperty.show;
      field.fieldValue = fieldproperty.fieldValue;
      field.fieldValues = fieldproperty.fieldValues;
    },
    ///发布表单数据
    PublishForm() {
      this.pageLoading = true;
      var usables = this.form.areas.filter((o) => o.usable === false);
      if (usables.length == 0) {
        for (let index = 0; index < this.form.areas.length; index++) {
          usables = [];
          usables = this.form.areas[index].fields.filter(
            (o) => o.usable === false
          );
          if (usables.length > 0) break;
        }
      }

      if (usables.length == 0) {
        this.pageLoading = false;
        this.$confirm(
          this.$t("i18n.confirm_Publish"),
          this.$t("i18n.confirm"),
          {
            type: "warning",
          }
        ).then(() => {
          this.pageLoading = true;
          reqVue.$Post(this.form, this.apipath + "/v1.0/publish", this.way).then(
            function(data) {
              if (data.status) {
                this.$store.commit("closeCurrentPage", this.$route.fullPath);
                this.$router.push({
                  path: "/form",
                });
              } else {
                this.pageLoading = false;
                this.$message.error(data.message);
              }
            }.bind(this)
          );
        });
      } else {
        this.pageLoading = false;
        this.$message.error(
          this.$t("formi18n.field_property_mandatory_delete")
        );
      }
    },
    ///保存表单数据
    SaveForm() {
      //let usable = false;
      this.pageLoading = true;
      var usables = this.form.areas.filter((o) => o.usable === false);
      if (usables.length == 0) {
        for (let index = 0; index < this.form.areas.length; index++) {
          usables = [];
          usables = this.form.areas[index].fields.filter(
            (o) => o.usable === false
          );
          if (usables.length > 0) break;
        }
      }

      if (usables.length == 0) {
        this.pageLoading = false;
        this.$confirm(this.$t("i18n.confirm_save"), this.$t("i18n.confirm"), {
          type: "warning",
        }).then(() => {
          this.pageLoading = true;
          reqVue.$Post(this.form, this.apipath + "/v1.0/save", this.way).then(
            function(data) {
              if (data.status) {
                this.$store.commit("closeCurrentPage", this.$route.fullPath);
                this.$router.push({
                  path: "/form",
                });
              } else {
                this.pageLoading = false;
                this.$message.error(data.message);
              }
            }.bind(this)
          );
        });
      } else {
        this.pageLoading = false;
        this.$message.error(
          this.$t("formi18n.field_property_mandatory_delete")
        );
      }
    },
    getdata(evt) {
      console.log(evt.draggedContext.filterKey);
      //这里evt.draggedContext后续的内容根据具体的定义变量而定
    },
    datadragEnd(evt) {
      console.log(evt);
    },
    onMoveCallback(val) {
      console.log(val, "move==================");
    },
  },
};
</script>
